<template>
	<view>
		<mescroll-body ref="mescrollRef" @down="downCallback" :bottombar="false" :down="downOption" :sticky="false"
			@up="upCallback" :up="upOption" @init="mescrollInit">
			<view class="box-class">
				<view class="item" v-for="(item,index) in list" :key="index" :style="{backgroundImage: item.image }">
					<view class="subdesc">
						<view class="btn">
							<u-icon name="pushpin" color="#FFF" size="12"></u-icon>
							<text style="padding-left: 10upx;">订阅</text>
						</view>
					</view>
					<view class="face">
						<image :src="item.url" mode=""></image>
					</view>
					<view class="box-author">
						<text>{{ item.name }}</text>
					</view>
					<view class="box-author-count">
						<text>{{ item.count }}篇文章</text>
					</view>
					<view class="box-author-desc">
						<text>{{ item.desc }}</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- #ifdef H5 -->
		<view style="height: 100px;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import MescrollMixin from "@/libs/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				mescroll: null,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: null,
						tip: "暂无数据",
						fixed: false,
						top: "560rpx",
					},
					textNoMore: '没有更多数据',
					toTop: {
						warpId: null,
						src: null,
						html: null,
						offset: 1000,
						warpClass: "mescroll-totop",
						showClass: "mescroll-fade-in",
						hideClass: "mescroll-fade-out",
						duration: 300,
						supportTap: false,
						btnClick: null
					}
				},
				listQuery: {
					page: 1,
					pageSize: 20
				},
				list: []
			}
		},
		methods: {
			upCallback(options) {
				this.listQuery.page = options.num
				this.listQuery.pageSize = options.size
				this.fetchData()
			},
			// 下拉刷新的回调 (mixin默认resetUpScroll)
			downCallback() {
				this.listQuery.page = 1
				if (this.mescroll.optUp.use) {
					this.mescroll.resetUpScroll()
				} else {
					setTimeout(() => {
						this.mescroll.endSuccess()
					}, 500)
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			fetchData() {
				let listColor = [
					'linear-gradient(103.3deg, rgb(252, 225, 208) 30%, rgb(255, 173, 214) 55.7%, rgb(162, 186, 245) 81.8%)',
					'linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));',
					'linear-gradient(102.7deg, rgb(253, 218, 255) 8.2%, rgb(223, 173, 252) 19.6%, rgb(173, 252, 244) 73.2%, rgb(202, 248, 208) 90.9%)',
					'linear-gradient(111.4deg, rgb(238, 113, 113) 1%, rgb(246, 215, 148) 58%);'
				]

				let list = [
					{ "name": "随思偶得", "count": 175, "url": "https://www.watch-life.net/images/life-thinking.jpg", "desc": "记录观察生活、思考人生的思想火花。" },
					{ "name": "Visual Studio", "count": 128, "url": "https://www.watch-life.net/images/visual-studio.png", "desc": "有关Visual Studio2005、Visual Studio2008、Visual Studio2010的文章" },
					{ "name": "家有女儿", "count": 94, "url": "https://www.watch-life.net/images/happy-fathers-day-wishes.jpg", "desc": "记录我的可爱小天使和她老爸的故事" },
					{ "name": "微信", "count": 52, "url": "https://www.watch-life.net/images/weixin.jpg", "desc": "微信的相关文章。" },
					{ "name": "WordPress", "count": 47, "url": "https://www.watch-life.net/images/wordpress.jpg", "desc": "有关wordpress的文章" },
					{ "name": "悦读", "count": 32, "url": "https://www.watch-life.net/images/read.jpg", "desc": "有关读书的一些杂思随感。" },
					{ "name": "IT观察", "count": 29, "url": "https://www.watch-life.net/images/it.jpg", "desc": "有关IT圈的评论和思考" },
					{ "name": "Google App", "count": 22, "url": "https://www.watch-life.net/images/google.jpg", "desc": "Google 相关的应用" },
					{ "name": "Asp.net", "count": 10, "url": "https://www.watch-life.net/images/aspnet.png", "desc": "关于asp.net的文章" },
					{ "name": "网站应用", "count": 9, "url": "https://www.watch-life.net/images/website.jpg", "desc": "有关网站应用的文章" },
					{ "name": "收藏", "count": 8, "url": "https://www.watch-life.net/images/favorites.png", "desc": "收藏网络上好文章" },
					{ "name": "童眼看世界", "count": 6, "url": "https://www.watch-life.net/images/child-world.jpg", "desc": "用我女儿的眼光来看这个多彩的生活，当然，是由老爸来模仿和记录的。" },
					{ "name": "编程札记", "count": 5, "url": "https://www.watch-life.net/images/programming-note.jpg", "desc": "有关编程的一些心得、感受" },
					{ "name": "c#", "count": 4, "url": "https://www.watch-life.net/images/charp.jpg", "desc": "有关c#的文章" },
					{ "name": "vs2005", "count": 3, "url": "https://www.watch-life.net/images/vs2005.jpg", "desc": "有关vs2005的文章" },
					{ "name": "windows mobile", "count": 3, "url": "https://www.watch-life.net/images/windows-mobile.jpg", "desc": "有关windows mobile 的文章" },
					{ "name": "影视", "count": 3, "url": "https://www.watch-life.net/images/movie.jpg", "desc": "有关影视的文章" },
					{ "name": "Javascript", "count": 3, "url": "https://www.watch-life.net/images/javascript.jpg", "desc": "有关javascript的文章" },
					{ "name": "NET 点滴", "count": 2, "url": "https://www.watch-life.net/images/net.jpg", "desc": "NET 点滴" },
					{ "name": "php", "count": 2, "url": "https://www.watch-life.net/images/php.png", "desc": "有关php的文章" },
					{ "name": "iOS", "count": 2, "url": "https://www.watch-life.net/images/ios.png", "desc": "有关IOS开发" },
					{ "name": "web开发", "count": 1, "url": "https://www.watch-life.net/images/web-app.jpg", "desc": "web开发技术相关文章" },
					{ "name": "Mysql", "count": 1, "url": "https://www.watch-life.net/images/mysql.jpg", "desc": "关于Mysql的文章" },
					{ "name": "sql server", "count": 1, "url": "https://www.watch-life.net/images/sql-server.jpg", "desc": "关于sql server 的文章" },
					{ "name": "技术书评", "count": 1, "url": "https://www.watch-life.net/images/it-book-reviews.png", "desc": "有关编程书籍的书评" },
				]

				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					let index = i % 4
					item.image = listColor[index]
					this.list.push(item)
				}
				this.mescroll.endSuccess(this.list.length, false)
			},
		}
	}
</script>

<style lang="scss">
	.box-class {
		display: flex;
		flex-wrap: wrap;
		--n: 2;
		--w: 350upx;


		.item {
			height: 280px;
			border-radius: 15upx;
			background-image: linear-gradient(103.3deg, rgb(252, 225, 208) 30%, rgb(255, 173, 214) 55.7%, rgb(162, 186, 245) 81.8%);
			width: var(--w);
			padding: 0px;
			margin: 10upx calc((100% - var(--w) * var(--n) - 10px) / var(--n) / 2);
			border: 0px solid #FF0000;
			position: relative;

			.subdesc {
				display: flex;
				padding: 15upx;
				justify-content: flex-end;

				.btn {
					background-color: rgba(0, 0, 0, 0.2);
					padding: 5px;
					font-size: 24upx;
					color: #FFF;
					border-radius: 10upx;
					display: flex;

				}
			}

			.face {
				overflow: hidden;
				text-align: center;
				border: 0px solid #FF0000;

				image {
					border: 1px solid #FFF;
					border-radius: 50%;
					width: 100px;
					height: 100px;
				}
			}

			.box-author {
				text-align: center;
				padding: 5px;
				font-size: 30upx;
				color: #666666;

			}

			.box-author-count {
				text-align: center;
				padding: 5px;
				font-size: 20upx;
				color: #7e7e7e;

			}

			.box-author-desc {
				text-align: center;
				padding: 5px;
				font-size: 24upx;
				color: #7e7e7e;

			}
		}
	}
</style>